import React, {useState} from 'react';
import {InboxOutlined} from "@ant-design/icons";
import {Button, Card, Divider, Flex, message, Upload, UploadProps} from "antd";
import {testDownloadUsingGet, testUploadFileUsingPost} from "@/services/backend/fileController";
import {COS_HOST} from "@/constants";
import {saveAs} from "file-saver";

const {Dragger} = Upload;
/**
 * 测试文件上传下载页面
 * @constructor
 */
const TestFilePage: React.FC = () => {
  const [value, setValue] = useState<string>();
  const props: UploadProps = {
    name: 'file',
    multiple: false,
    maxCount: 1,
    onDrop(e) {
      console.log('Dropped files', e.dataTransfer.files);
    },
    customRequest: async (fileObj: any) => {
      try {
        const res = await testUploadFileUsingPost({}, fileObj.file);
        fileObj.onSuccess(res.data);
        setValue(res.data);
      } catch (e: any) {
        message.error("上传失败" + e.message);
        fileObj.onError(e);
      }
    },
    onRemove() {
      setValue(undefined);
    }
  };
  return (
    <Flex gap={16}>
      <Card title={"文件上传"}>

        <Dragger {...props}>
          <p className="ant-upload-drag-icon">
            <InboxOutlined/>
          </p>
          <p className="ant-upload-text">Click or drag file to this area to upload</p>
          <p className="ant-upload-hint">
            Support for a single or bulk upload. Strictly prohibited from uploading company data or other
            banned files.
          </p>
        </Dragger>
      </Card>

      <Card title={"文件下载"}>
        <div>文件地址: {COS_HOST + value}</div>

        <Divider/>
        <img src={COS_HOST + value} height={200}/>
        <Divider/>
        <Button
        onClick={async ()=>{
          const blob = await testDownloadUsingGet({
            filePath:value,
          },{
            responseType:'blob',
          });
          //使用file-saver来保存文件
          const fullPath = COS_HOST + value;
          saveAs(blob,fullPath.substring(fullPath.lastIndexOf("/")+1));
        }}
        >
          点击下载文件
        </Button>
      </Card>
    </Flex>
  );
}
export default TestFilePage;
